<template>
  <div class="area">
    <van-field
      readonly
      clickable
      label="选择地区"
      is-link
      v-model="valueArea"
      placeholder="请选择所在地区"
      @click="bindShow"
      v-bind="inputProps"
    />

    <van-popup v-model:show="showArea" position="bottom">
      <van-area :value="code" :area-list="areaList" @confirm="onAreaConfirm" @cancel="bindCancel" />
    </van-popup>
  </div>
</template>
<script setup>
import { areaList } from '@vant/area-data'

const emit = defineEmits(['change', 'update:modelValue'])
const props = defineProps({
  modelValue: String,
  code: String,
  show: Boolean,

  inputProps: Object,
})

const showArea = ref(props.show)
const valueArea = ref(props.modelValue)

const bindShow = () => {
  showArea.value = true
}

const bindCancel = () => {
  showArea.value = false
}

const onAreaConfirm = val => {
  showArea.value = false
  valueArea.value = val[0].name + '/' + val[1].name + '/' + val[2].name
  emit('change', valueArea.value)
  emit('update:modelValue', valueArea.value)
}
</script>
<style lang="scss" scoped></style>
